@(input: String)(implicit session: Session)
    @english.home.main("Search") {

        <style>

                .fixed-table-container {
                    border: none;
                }

                .table > tbody > tr > td {
                    border: none;
                }

                table tr{
                    border: none;
                }

                .bootstrap-table .table {
                    border: none;
                }

                .result-border {
                    border: 1px solid #dbe3e7;
                    padding: 20px 20px 0px 20px;
                    border-radius: 5px;
                }

                .type-right {
                    float: right;
                    border-radius: 5px;
                    background-color: #F1F1F1;
                }

                #content ul li {
                    padding: 0;
                }

        </style>

        <div id="content">
            <h1 class="title">Search</h1>
            <div class="line"></div>

                <div align="center">
                    <div style="width: 80%;">


                        <form class="registration-form form-horizontal" id="form"
                        accept-charset="UTF-8" method="get" action="/US/mollusk/search/searchBefore">



                            <input type="text" class="form-control" name="input" style="height: 30px;
                                float: left;
                                width: 95%;
                                margin-left: 1%" placeholder="Keyword">

                            <button style="float: left;
                                background-color: transparent;
                                border: transparent;
                                float: right;
                                margin-top: -31px;
                                margin-right: 10px;" type="submit">
                                <i class="fa fa-search" style="font-size: 20px"></i>
                            </button>
                        </form>

                        <br>
                        <br>
                        <br>

                        <div id="result" style="display: none">
                            <hr style="border: 1px solid #e9f3f4;">

                            <h3 align="left" style="font-size: 20px;"><b>Keyword : </b><span>@input</span></h3>


                            <table id="table" class="table" data-pagination="true" data-page-list="[5, 10]" data-page-size="5"
                            style="margin-top: 20px"></table>
                        </div>
                    </div>

                </div>
            </div>

        <script>

                $(function () {

                    if (!@input.trim.isEmpty) {
                        Search();
                    }

                });

                function Search() {
                    let index = layer.load(1);


                    let obj = $("#select").val();

                    $("#table").bootstrapTable('destroy');


                    $('#table').bootstrapTable({
                        method: 'post',
                        url: "/mollusk/search/searchByDbInput?input=@input",
                        sidePagination: "server",
                        pageNumber: 1,
                        pagination: true,
                        pageList: [5, 10],
                        pageSize: 5,
                        contentType: "application/x-www-form-urlencoded",
                        showHeader: false,
                        columns: [{
                            field: "result",
                            formatter: function (value, row, index) {
                                let genelink =  "/US/mollusk/genome/genomeInfoPage?id=" + row.id;
                                const main = "<div class='result-border'><a href='" + genelink + "' target='_blank'>" + row.geneid + "</a>" +
                                        "<a href='@routes.GenomeController.browserPage("")' target='_blank'><span class='type-right'>" +
                                        "&nbsp;" + row.species + "&nbsp;</span></a><hr>";
                                let option = "";
                                $.each(row.result, function (i, v) {
                                    option += "<p style='font-size: 12px'><b>" + v.option + " ：</b> " + v.result + "</p>";
                                });

                                const html = main + option + "</div>";

                                return html;
                            }
                        }]
                    });

                    layer.close(index);
                    $("#result").show();
                }



        </script>
    }